<template>
  <div>
    <el-row class="card">
      <el-form
        :model="queryParam"
        ref="queryParam"
        label-position="right"
        label-width="80px"
        size="small"
      >
        <el-col :span="5">
          <el-form-item label="医院名称" prop="hosname">
            <el-input v-model="queryParam.hosname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="医院编号" prop="hoscode">
            <el-input v-model="queryParam.hoscode"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-left: 1%" :span="6">
          <el-button type="primary" round @click="getList">查询</el-button>
          <el-button type="Info" @click="reset('queryParam')" round>重置</el-button>
        </el-col>
      </el-form>
    </el-row>

    <el-row class="card">
      <el-col :span="24">
        <el-row class="button-margin">
          <el-button-group>
            <el-button plain size="medium" type="success" :loading="loading" @click="add">
              添加
            </el-button>
            <el-button
              plain
              size="medium"
              type="danger"
              :loading="loading"
              @click="remove"
            >
              批量删除
            </el-button>
          </el-button-group>
        </el-row>
        <el-table
          :data="list"
          stripe
          v-loading="loading"
          @selection-change="changeSelect"
        >
          <el-table-column type="index" />
          <el-table-column type="selection" />
          <el-table-column prop="hosname" label="医院名称" />
          <el-table-column prop="hoscode" label="医院编号" align="center" />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                v-loading="loading"
                active-text="启用"
                inactive-text="禁用"
                :active-value="0"
                :inactive-value="1"
                @change="changeStatus(scope.row.status, scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="apiUrl" label="api基础路径" />
          <el-table-column prop="contactsName" label="联系人姓名" align="center" />
          <el-table-column prop="contactsPhone" label="联系人手机" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                plain
                type="danger"
                :loading="loading"
                @click="remove(scope.row.id)"
              >
                删除
              </el-button>
              <el-button
                plain
                type="primary"
                :loading="loading"
                @click="edit(scope.row.id)"
              >
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          @pagination="getList"
          :total="pageData.total"
          :page.sync="pageData.pageNum"
          :limit.sync="pageData.pageSize"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getList, removeById, lockHospSet } from "@/api/hospset";
export default {
  name: "",
  components: {},
  props: {},
  computed: {
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +newDate()
        : this.$route + +newDate();
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      queryParam: {},
      pageData: {
        total: 1,
        pageNum: 1,
        pageSize: 10,
      },
      areaData: {
        ids: [],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let page = { pageNum: this.pageData.pageNum, pageSize: this.pageData.pageSize };
      this.loading = true;
      getList(page, this.queryParam).then((res) => {
        this.pageData.total = res.data.total;
        this.list = res.data.records;
        this.loading = false;
      });
    },
    /* 列表选中回调 */
    changeSelect(rows) {
      if (rows.length > 0) {
        this.areaData.ids = rows.map((item) => {
          return item.id;
        });
      } else {
        this.areaData.ids = [];
      }
    },
    /** 医院设置启用禁用 */
    changeStatus(status, id) {
      let statusStr = "";
      if (status == 0) {
        statusStr = "启用";
      } else {
        statusStr = "禁用";
      }
      this.$confirm(`是否确认${statusStr}?`, "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let _this = this;
          _this.loading = true;
          new Promise(function (resolve, reject) {
            lockHospSet(id, status).then((res) => {
              if (res.code != 200) {
                reject(res);
              } else {
                resolve(res);
              }
            });
          }).then(
            (resolve) => {
              _this.$message.success(`${statusStr}成功`);
              _this.loading = false;
            },
            (reject) => {
              _this.getList();
            }
          );
        })
        .catch(() => {});
    },
    add() {
      this.$router.push({ path: "/hospSet/add", params: { key: this.key } });
    },
    edit(id) {
      this.$router.push({ path: `/hospSet/edit/${id}`, params: { key: this.key } });
    },
    /* 参数非空为单选删除, 参数为空为多选删除  */
    remove(id) {
      this.$confirm("是否确认删除?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let removeIds = null;
          if (id) {
            removeIds = [id];
          } else {
            removeIds = this.areaData.ids;
          }

          if (!removeIds) {
            this.$message.error("请选择删除列");
            return;
          }
          let _this = this;
          new Promise(function (resolve, reject) {
            removeById(removeIds).then((res) => {
              resolve(res);
            });
          }).then(
            (resolve) => {
              _this.getList();
              _this.$message.success("删除成功");
            },
            (reject) => {}
          );
        })
        .catch(() => {});
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
  },
  watch: {},
  computed: {},
  mounted() {},
};
</script>
<style scoped></style>
